<template>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<span>编辑文章</span>
		</div>
		<el-form :model="form" ref="form" :rules="rules" label-width="100px">
			<el-form-item label="标题" prop="title">
				<el-input v-model="form.title"></el-input>
			</el-form-item>
			<el-form-item label="描述" prop="description">
				<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="form.description"></el-input>
			</el-form-item>
			<el-form-item label="分类">
				<el-col :span="6">
					<el-select v-model="form.cate_1st" @change="handleChange" placeholder="请选择一级分类">
						<el-option v-for="item in cate_1st_options" :key="item.cate_id" :label="item.cate_name"
							:value="item.cate_id">
						</el-option>
					</el-select>
				</el-col>
				<el-col :span="6">
					<el-select v-model="form.cate_2nd" placeholder="请选择二级分类">
						<el-option v-for="item in cate_2nd_options" :key="item.cate_id" :label="item.cate_name"
							:value="item.cate_id">
						</el-option>
					</el-select>
				</el-col>
			</el-form-item>
			<el-form-item label="主图" prop="main_photo">
				<UploadPhoto v-model="form.main_photo"></UploadPhoto>
			</el-form-item>
			<el-form-item label="内容" prop="content">
				<WangEditor v-model="form.content" :server="`${$server}/upload/editor/`" fieldName='file'>
				</WangEditor>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleEdit">保存修改</el-button>
			</el-form-item>
		</el-form>
	</el-card>
</template>

<script>
import WangEditor from "@/components/WangEditor.vue";
import { Category } from '@/api';
import { Article } from "@/api";
import UploadPhoto from '@/components/UploadPhoto.vue';
export default {
	name: 'Edit',
	// 布局注册
	components: { WangEditor, UploadPhoto },
	data() {
		return {
			form: {
				cate_1st: '',
				cate_2nd: '',
				title: '',
				description: '',
				main_photo: '',
				// 富文本编辑器的内容在html内
				content: '',
			},
			cate_1st_options: [],
			cate_2nd_options: [],
			rules: {
				title: [{ required: true, message: "请填写文章标题！", trigger: 'blur' }],
				description: [{ required: true, message: "请填写文章描述！", trigger: 'blur' }],
				main_photo: [{ required: true, message: "请上传文章主图！", trigger: 'blur' },],
				content: [{ required: true, message: "请输入文章内容！", trigger: 'blur' },],
			},
		}
	},
	async created() {
		// 获取地址栏参数
		let { article_id } = this.$route.params;
		this.init(article_id);
		document.title = "发布文章";
	},
	methods: {
		// 初始化：通过async函数保证Ajax顺序执行
		async init(article_id) {
			// 1.发送一级分类
			this.cate_1st_options = await this.loadSubcate(0);
			// 2.发送文章详情
			let { status, data } = await Article.detail({ article_id });
			// 3.发送二级分类
			this.cate_2nd_options = await this.loadSubcate(data.cate_1st);
			if (status) {
				// 还原表单
				this.form = data;
			}
		},
		// 加载子级分类
		async loadSubcate(cate_id) {
			let { status, msg, data } = await Category.sub({ cate_id });
			if (status) {
				return data;
				// async函数return出去的是Promise对象
			}
		},
		// watch侦听器与还原表单冲突
		// 利用change事件来获取选中的值
		// 监控一级分类的选择
		async handleChange(value) {
			// value是选中的一级分类的id
			console.log(value);
			// Ajax请求二级分类
			this.cate_2nd_options = await this.loadSubcate(value);
			this.form.cate_2nd = this.cate_2nd_options[0]?.cate_id;
		},
		// 保存修改
		handleEdit() {
			this.$refs.form.validate(async (valid) => {
				if (valid) {
					let { status, msg } = await Article.edit({ ...this.form });
					if (status) {
						this.$message.success(msg);
						this.$router.push('/article/list');
					} else {
						this.$message.error(msg);
					}
				}
			});
		}
	},
}
</script>

<style>
.el-input {
	margin-right: 30px;
}
</style>
